<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="小组" name="first">
        <el-table
          key="1"
          :header-cell-style="{background:'efefef',color:'#666'}"
          stripe
          :data="tableDataTeam"
          style="width:100%"
        >
          <el-table-column prop="rank" label="排名" width="50px" align="center"></el-table-column>
          <el-table-column prop="team" label="小组" min-width="100px" show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="dept"
            label="所属部门"
            min-width="100px"
            max-width="110px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="rankRcore" label="分数" width="60px">
            <template slot-scope="scope">
              <el-progress :percentage="Number(scope.row.rankRcore)" :text-inside="true"></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="个人" name="second">
        <el-table
          key="2"
          :header-cell-style="{background:'efefef',color:'#666'}"
          stripe
          :data="tableDataPeople"
          style="width:100%"
        >
          <el-table-column prop="rank" label="排名" width="50px" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" min-width="100px" show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="dept"
            label="所属部门"
            min-width="100px"
            max-width="110px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="rankRcore" label="分数" width="60px">
            <template slot-scope="scope">
              <el-progress :percentage="Number(scope.row.rankRcore)" :text-inside="true"></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      tableDataTeam: [
        {
          rank: "1",
          team: "科技服务组",
          dept: "架构管理部",
          rankRcore: 39,
        },
        {
          rank: "2",
          team: "自营产品组",
          dept: "互金应用研发部",
          rankRcore: 56,
        },
        {
          rank: "3",
          team: "风险策略组",
          dept: "个人应用支持部",
          rankRcore: 88,
        },
      ],
      tableDataPeople: [
        {
          rank: "1",
          name: "科技服务组",
          dept: "架构管理部",
          rankRcore: 44,
        },
        {
          rank: "2",
          name: "自营产品组",
          dept: "互金应用研发部",
          rankRcore: 77,
        },
        {
          rank: "3",
          name: "风险策略组",
          dept: "个人应用支持部",
          rankRcore: 23,
        },
      ],
    };
  },
  methods: {
    handleClick(tab, e) {},
    // insiit() {
    //   queryteam().then((res) => {
    //     if (res && res.length > 0) {
    //       this.tableDataTeam = res.slice(0, 10);
    //     }
    //   });
    // },
  },
};
</script>
<style lang="scss" scoped>
    ::v-deep .el-progress-bar__innerText{
        display: none;
    }
</style>